<template>
  <div class="myTable" >
    <el-row class="searchRow">
      <el-input style="width:200px"
                placeholder="单位名称"
                prefix-icon="el-icon-search"
                class="mr15"
                v-model="search.companyName">
      </el-input>
      <el-input style="width:200px"
                placeholder="项目名称"
                prefix-icon="el-icon-search"
                class="mr15"
                v-model="search.projectName">
      </el-input>
      <el-button type="success" @click="query(1)">查询</el-button>
      <el-button  type="default" @click="clear()" >重置</el-button>

     <!-- <el-button type="primary" class="pull-right" icon="el-icon-plus" @click="showEdit()" >添加</el-button>-->
    </el-row>

    <el-table :data="tableData.data" class="mt20" :show-header="true" :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'">
      <el-table-column  type="index" label="NO" width="60px" :index="indexMethod"></el-table-column>
      <el-table-column label="单位名称" width="370px" prop="companyName">  </el-table-column>
      <el-table-column label="项目名称"  >
        <template slot-scope="scope">
          <el-link type="primary" :underline=false class="zhouText" @click="showDetail(scope.row)">{{scope.row.projectName}}</el-link>
          <!--<router-link to="/fourEvent/eventDetail/8a8ddb8c63d39d4b016402514fca00b6">{{scope.row.itemName}}</router-link>-->
        </template>
      </el-table-column>
      <el-table-column label="建设地点" width="170px" prop="projectLocation"></el-table-column>
      <el-table-column label="投资金额（万元）" width="200px" prop="investAmount" ></el-table-column>  .
      <el-table-column label="项目联系人及联系方式" width="240px" >
      <template slot-scope="scope">
        <span>{{scope.row.contactMan+"  "+scope.row.contactPhone}}</span>
        <!--<router-link to="/fourEvent/eventDetail/8a8ddb8c63d39d4b016402514fca00b6">{{scope.row.itemName}}</router-link>-->
      </template>
      </el-table-column>
      <!--    <el-table-column  label="操作" width="120px">
        <template slot-scope="scope">
          <span style="white-space: nowrap">
            <el-button type="primary" icon="el-icon-edit" size="mini"	@click="showEdit(scope.row)" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)" circle></el-button>
        </span>
       </template>
      </el-table-column>  -->
    </el-table>
    <el-pagination @current-change="query" style="margin-top: 25px"
                   layout="total,prev, pager, next" :total="tableData.rowsCount" background :page-size="tableData.pageSize"> </el-pagination>


    <el-dialog   width="60%"   :title='copy.projectName' class="fullDialog" :visible.sync="dialogVisible">
      <div class="textWrap">
        <p class="textLeft content myWord" v-html="copy.content">
        </p>
      </div>
    </el-dialog>


    <el-dialog   width="60%" :fullscreen=false :visible.sync="picDialogVisible">
      <img class="alignCenter" :src="picDialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  /* eslint-disable no-unused-vars */

  const tableDataFack = {
      "curPageNO": 1, "pageSize": 10, "pageIndex": 0, "rowsCount": 2, "pageCount": 1, "data":
          [{"id": "1", "companyName": "宜昌宜盛置业有限责任公司", "name": "宜化巴黎香颂二期14#-33#楼 38#-45#楼", "location": "东山园区", "amount": "100000", "contact": "付华茜 13972530120"},
            {"id": "2", "companyName": "宜昌市金牛押运护卫保安服务有限责任公司", "name": "宜昌高端金融电子设备产业园（一期）", "location": "电子信息产业园", "amount": "13097", "contact": "郑重 13872684502"}]
    }

  export default {
    name: "judgeService",
    data: function() {
      return {
        search:{companyName:"",projectName:"",type:1},
        tableData: {},
        dialogVisible:false,
        copy:{iconUrl:"",integrationName:"",type:"",url:""},
        picDialogVisible:false,
        picDialogImageUrl:""
      }
    },
    methods:{
      indexMethod:function(index){
        return (this.tableData.curPageNO-1)*10+index+1;
      },
      query:function(pageNo){
        let vm = this;
        vm.search.curPageNO = pageNo||vm.tableData.curPageNO;
        vm.search.pageSize = 10;
        this.$http.post("/yczmq/bigScreen/projectResult/page",window.changeDataType(vm.search)).then(resp => {
          if(resp.status == 0){
            vm.tableData = resp.data;
          }
        })
      },
      clear(){
        this.search = {};
      },
      del:function(item){
        let vm = this;
        confirm(this,'确认删除此记录?',()=>{
          this.$http.get("/yczmq/projectResult/delete/{id}".replace("{id}",item.id)).then(resp => {
            if (resp.status == 0) {
              window.msg(vm,"删除成功:"+item.projectName);
              vm.query();
            }
          })
        })
      },
      showDetail:function(item){
        let vm = this;
        this.$http.get("/yczmq/bigScreen/projectResult/get/{id}".replace("{id}",item.id)).then(resp => {
          if (resp.status == 0) {
            vm.copy = resp.data;
            vm.dialogVisible = true;
          }
        })
      } ,
      showEdit: function (item) {
        let vm = this;
        if (item) {
          vm.copy.id = item.id;
          vm.copy.integrationName = item.integrationName;
          vm.copy.type = item.type;
          vm.copy.iconUrl = item.iconUrl;
          vm.copy.url = item.url;
          // Object.assign(vm.copy, item);
        }else{
          vm.copy.integrationName = "";
          vm.copy.type = "";
          vm.copy.iconUrl = "";
          vm.copy.url = "";
        }
        vm.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        this.copy.iconUrl = "/yczmq"+res.data.url;
        this.$forceUpdate();
        //URL.createObjectURL(file.raw);
      },
      handleUrlSuccess(res, file) {
        this.copy.url = "/yczmq"+res.data.url;
        this.$forceUpdate();
        //URL.createObjectURL(file.raw);
      },
      showPic(url){
        this.picDialogVisible = true;
        this.picDialogImageUrl = url;
      },
      beforeAvatarUpload(file) {
        //const isJPG = file.type === 'image/jpeg';
        const isJPG = file.type.startsWith("image");
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('请上传图片!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      save:function() {
        let vm = this;
        vm.$http.post("/yczmq/integration/saveOrEdit",vm.copy).then(resp=>{
          if(resp.status == 0){
            this.dialogVisible = false;
            vm.query();
          }
        })
      }
    },
    created(){
      this.query(1);
    }
  }
</script>
<style scoped>
  .bgBlue{
    background: #53b4f9;
  }
  .imgDiv{
    height: 80px;
    width: 80px;
    line-height: 80px;
    border-radius: 8px;
    text-align: center;
  }
  .imgDiv img{
    vertical-align: middle;
  }
  .biggerImg{
    max-height: 80px;
  }
</style>
